<template>
	<view>
		<!-- 选择收货地址 -->
		<uni-collapse>
			<uni-collapse-item title="选择收货地址" thumb="../../static/addricon.png">
				<uni-list>
						<uni-list-item
								v-for="(item, index) in addressList" :key="index"
								:title="item.name + '   ' + item.mobile"
								:note="item.address"
								show-badge="true"
								:badge-text="item.isDefault ? '默认' : ''"
								@click="chooseAddress(index)"
						>
						</uni-list-item>
					<uni-list-item title="新增地址" note="去新增一个地址信息" @click="addAddess"></uni-list-item>
				</uni-list>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 收货地址 -->
		<view class="addr" v-if="chooseAddressInfo">
			<view class="right">
				<view class="tel-name">
					<view class="name">
						{{chooseAddressInfo.name}}
					</view>
					<view class="tel">
						{{chooseAddressInfo.mobile}}
					</view>
				</view>
				<view class="addres">
					{{chooseAddressInfo.address}}
				</view>
			</view>
		</view>

		<!-- 购买商品列表 -->
		<view class="buy-list" v-for="(row,index) in buyListGoodses" :key="index">
			<view class="row">
				<view class="goods-info">
					<view class="img">
						<image :src="row.goods_info.cover_info.url"></image>
					</view>
					<view class="info">
						<view class="title">{{row.goods_info.name}}</view>
						<view class="spec">数量:{{row.num}}</view>
						<view class="price-number">
							<view class="price">￥{{row.goods_info.price*row.num}}</view>
							<view class="number">
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示-备注 -->
		<view class="order">
			<view class="row">
				<view class="left">
					备注 :
				</view>
				<view class="right">
					<input placeholder="选填,请输入备注内容" v-model="requestData.note" />
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="settlement">
				<view class="sum">合计:<view class="money">￥{{goodsPrice}}</view></view>
				<view class="btn" @tap="toPay">提交订单</view>
			</view>
		</view>

		<!--付款or去订单列表-->
		<view>
			<neil-modal
					:show="visibleModal"
					@close="closeModal"
					title="提示"
					:content="modalValue"
					@cancel="navigateTo(false)"
					@confirm="navigateTo(true)">
			</neil-modal>
		</view>
	</view>
</template>

<script>
    import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
    import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
    import uniList from '@/components/uni-list/uni-list.vue'
    import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
    import { address, order } from '../../common/config'
    import { mapState, mapMutations } from 'vuex'
    import neilModal from '@/components/neil-modal.vue';

	export default {
        computed:{
        	...mapState(['hasLogin','buyList']),
		},
        components: {uniCollapse,uniCollapseItem,uniList,uniListItem,neilModal},
		data() {
			return {
                visibleModal:false,//付款or去订单列表
                order_id:0,
				modalValue: '恭喜你，下单成功了，订单还未支付，请立即支付，如果余额不足，请充值后去我的订单列表完成支付。逾期不支付，订单将自动取消。马上支付￥',
                addressList: [],
				chooseAddressInfo:null,

				buyListGoodses:[],		//订单列表
				goodsPrice:0.0,	//商品合计价格

				requestData:{
                    address_id:0,//地址id
                    note:'',//备注
					type:1,//下单方式，1为直接下单，就是在商品详情页面，点的立即购买； 2为购物车下单。如果为直接下单，最后不要求传这个值
					cart_ids:[],//当下单方式为购物车下单2，这是要传的购物车id集合
                    goods_id:0,//当下单方式为立即购买1，这是要传的商品id号
                    goods_num:1,//当下单方式为立即购买1，这是要购买的商品数量
				},
			};
		},
        onLoad(){
            this.buyListGoodses = this.buyList;
		},
		watch:{
            buyListGoodses(data) {
                data.map((one) => {
                    this.goodsPrice += one.num*one.goods_info.price;
                    if(one.id) {	//购物车下单
                        this.requestData.cart_ids.push(one.id);
                        this.requestData.type = 2;
					} else {	//直接下单
                        this.requestData.goods_id = one.goods_info.id;
                        this.requestData.goods_num = one.num;
                        this.requestData.type = 1;
					}
				})
			}
		},
		onShow() {
            this.getAddress();
		},
		onHide() {
            this.clearBuyList();
		},
		onBackPress() {
            this.clearBuyList();
		},
		methods: {
            async navigateTo(myBoolen){
                if (myBoolen) {
                   await this.$api.MyRequest(order.PutOrder.url + this.order_id, order.PutOrder.method, {status:2})
					   .then(res => {
                       })
					   .catch(err => {
                       })
				}
                uni.redirectTo({url:'/pages/order/order_list?tbIndex=0'});
			},
            ...mapMutations(['clearBuyList']),
            chooseAddress(index){
				this.chooseAddressInfo = this.addressList[index];
                this.requestData.address_id = this.addressList[index].id;
			},
            addAddess() {
                uni.navigateTo({
                    url:'/pages/address/add'
                })
            },
            async getAddress() {
                await this.$api.MyRequest(address.GetAllAddress.url, address.GetAllAddress.method, {page:0})
                    .then(res => {
                        let data =[];
                        res.map((one) =>{
                            let address  =(one['province'] ? one['province']['name'] : '') + (one['city'] ? one['city']['name'] : '') + (one['region'] ? one['region']['name'] : '') + (one['receiver_address'] ? one['receiver_address'] : '');
                            let temp = {
                                id: one.id,
                                name: one.receiver_name,
                                mobile: one.receiver_phone,
                                isDefault:one.is_default,
                                address: address
                            };
                            data.push(temp);
                            if(temp.isDefault) {
                                this.requestData.address_id = temp.id;
                                this.chooseAddressInfo = temp;
							}
                        });
                        this.addressList = data;
                        this.$forceUpdate();
                    })
                    .catch(err => {
                    })
            },
            async toPay() {
                let data =  this.requestData;
                if (data.address_id === 0) {
                    this.msg('请选择配送地址');
                    return;
				}
                if (data.type === 2) {//购物车下单方式
                    delete data.goods_id;
                    delete data.goods_num;
				}
                if (data.type === 1) { //直接下单方式
                    delete data.cart_ids;
                    delete data.type;
                }
                await this.$api.MyRequest(order.PostOrder.url, order.PostOrder.method, data)
                    .then(res => {
						this.modalValue += res.total_price + '元。';
						this.visibleModal = true;
                        this.order_id = res.id;
                    })
                    .catch(err => {
                    })
            },
            closeModal(){
                this.visibleModal = false;
            },
		}
	}
</script>

<style lang="scss">
	.uni-collapse::before{
		background: none;
	}
	.uni-collapse-cell::after{
		background: none;
	}
	.uni-collapse::after{
		background: none;
	}
	.uni-collapse-cell__content{
		height: auto!important;
	}
	.addr{
	width: 86%;
	padding: 20upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	display: flex;
	.icon{
		width: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		image{
			width: 60upx;
			height: 60upx;
		}
	}
	.tel-name{
		width: 100%;
		display: flex;
		font-size: 32upx;
		.tel{
			margin-left: 40upx;
		}
	}
	.addres{
		width: 100%;
		font-size: 26upx;
		color: #999;
	}
}
.buy-list{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		margin: 30upx 0;
		.goods-info{
			width: 100%;
			display: flex;
			.img{
				width: 22vw;
				height: 22vw;
				border-radius: 10upx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 10upx;
				image{
					width: 22vw;
					height: 22vw;
				}
			}
			.info{
				width: 100%;
				height: 22vw;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				.title{
					width: 100%;
					font-size: 28upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					// text-align: justify;
					overflow: hidden;
				}
				.spec{
					font-size: 22upx;
					background-color: #f3f3f3;
					color: #a7a7a7;
					height: 40upx;
					display: flex;
					align-items: center;
					padding: 0 10upx;
					border-radius: 20upx;
					margin-bottom: 20vw;
				}
				.price-number{
					position: absolute;
					width: 100%;
					bottom: 0upx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28upx;
					height: 40upx;
					.price{
						color: #f06c7a;
					}
					.number{
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
			}
		}
	}
}
.order{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		margin: 20upx 0;
		height: 40upx;
		display: flex;
		.left{
			font-size: 28upx;
		}
		.right{
			margin-left: 40upx;
			font-size: 26upx;
			color: #999;
			input{
				font-size: 26upx;
				color: #999;
			}
		}
	}
}
.blck{
	width: 100%;
	height: 100upx;
}
.footer{
		width: 100%;
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;
		
		.settlement{
			width: 80%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.sum{
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;
				.money{
					font-weight: 600;
				}
			}
			.btn{
				padding: 0 30upx;
				height: 60upx;
				background-color: #f06c7a;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				border-radius: 40upx;
			}
		}
	}
.detail{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		height: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nominal{
			font-size: 28upx;
		}
		.content{
			font-size: 26upx;
			color: #f06c7a;
		}
	}
}
</style>
